<template>
  <div class="app-container">
    <!-- 基本信息 -->
    <div class="titleLineGreen">个人信息</div>
    <div class="info flex">
      <div class="info-left flex">
        <!-- 个人信息卡片 -->
        <div class="usercard">
          <el-image class="info_avatar" :src="info.avatar
            ? info.avatar
            : require('@/assets/images/head_img.png')
            " :preview-src-list="[info.avatar]"></el-image>
          <div class="name">{{ info.name }}</div>
          <div class="flex phone">
            <img src="@/assets/images/userDetail/phone.png" alt="" />
            <div>{{ info.phoneNumber }}</div>
          </div>
        </div>
        <!-- 勋章和 数据统计 -->
        <div class="medal-data">
          <!-- 勋章 -->
          <div class="flex medal">
            <img class="medal-icon" src="@/assets/images/userDetail/medal.png" alt="" />
            <div class="medal-right">
              <div class="medal-label">已获得勋章</div>
              <div class="medal-list">
                <img v-for="(item, index) in medals" :key="index" class="medal-item" :src="item.medalUrl" />
              </div>
            </div>
          </div>
          <!-- 数据统计 -->
          <div class="flexbet data">
            <div class="data-item flex">
              <img class="data-icon" src="@/assets/images/userDetail/avgScore.png" alt="" />
              <div class="data-form">
                <div class="data-label">平均成绩</div>
                <div class="data-value">
                  {{
            data && (data.avgScore || data.avgScore == 0)
              ? data.avgScore
              : "--"
          }}
                </div>
              </div>
            </div>
            <div class="data-item flex">
              <img class="data-icon" src="@/assets/images/userDetail/passRate.png" alt="" />
              <div class="data-form">
                <div class="data-label">及格率</div>
                <div class="data-value">
                  {{
              data && (data.passingRate || data.passingRate == 0)
                ? (data.passingRate * 100).toFixed(0) + "%"
                : "--"
            }}
                </div>
              </div>
            </div>
            <div class="data-item flex">
              <img class="data-icon" src="@/assets/images/userDetail/time.png" alt="" />
              <div class="data-form">
                <div class="data-label">
                  {{ activeName == "check" ? "抽查次数" : "总学习时长" }}
                </div>
                <div class="data-value">
                  {{
            activeName == "check"
              ? total || total == 0
                ? total
                : "--"
              : data &&
                (data.totalStudyTime || data.totalStudyTime == 0)
                ? data.totalStudyTime + "h"
                : "--"
          }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-right">
        <div class="post" v-for="(item, index) in info.regionSchoolPostNames" :key="index">
          <div class="post-label flex">
            <div class="point"></div>
            <div class="label">大区—门店—岗位</div>
          </div>
          <div class="post-value overtxt">
            <Texttooltip width="100%" :text="item"></Texttooltip>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情 -->
    <div class="titleLineGreen" style="margin-top: 40px">详细</div>
    <div style="padding: 10px 0 0 10px">
      <el-tabs v-model="activeName" type="border-card">
        <!-- 学习记录 -->
        <el-tab-pane label="学习记录" name="study">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="课程" prop="courseName">
              <el-input v-input-restrict v-model="queryParams.courseName" placeholder="请输入课程名称" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item>
              <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini"
                @click="handleQuery">搜索</el-button>
              <el-button v-preventReClick icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="postList">
            <el-table-column show-overflow-tooltip :label="`${$courseName ? $courseName : '课程'}`" align="center"
              prop="courseName" />
            <el-table-column show-overflow-tooltip label="训练员" align="center" prop="teacherNames" />
            <el-table-column show-overflow-tooltip label="课时（h）" align="center" prop="studyTime">
              <template slot-scope="scope">
                <div>
                  {{
            scope.row.studyTime || scope.row.studyTime == 0
              ? scope.row.studyTime
              : "--"
          }}
                </div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="学习时间（h）" sortable align="center" prop="studyTime">
              <template slot-scope="scope">
                <div>
                  {{
              scope.row.studyDuration || scope.row.studyDuration == 0
                ? (scope.row.studyDuration / 3600).toFixed(2)
                : "--"
            }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="课程状态" align="center" prop="study_status">
              <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.studyStatus == -1">未通过</el-tag>
                <el-tag type="success" v-if="scope.row.studyStatus == 2">已学习</el-tag>
                <el-tag type="info" v-if="scope.row.studyStatus == 0">未开始</el-tag>
                <el-tag v-if="scope.row.studyStatus == 1">学习中</el-tag>
              </template>
            </el-table-column>
            <el-table-column sortable label="平均分(百分制)" align="center" prop="avgScore">
              <template slot-scope="scope">
                <div>
                  {{
            scope.row.avgScore || scope.row.avgScore == 0
              ? scope.row.avgScore
              : "--"
          }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button v-preventReClick size="mini" type="text" icon="el-icon-view"
                  @click="handleGradeDetail(scope.row, scope.$index)">成绩详情</el-button>
                <el-button v-preventReClick size="mini" type="text" icon="el-icon-check"
                  @click="handlePass(scope.row, scope.$index)">通过课程</el-button>
                <el-button v-preventReClick size="mini" type="text" icon="el-icon-close"
                  @click="handlekickOut(scope.row, scope.$index)">踢出课程</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-tab-pane>
        <!-- 授课记录 -->
        <el-tab-pane label="授课记录" name="teach">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="课程" prop="courseName">
              <el-input v-input-restrict v-model="queryParams.courseName" placeholder="请输入课程名称" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="门店名称" prop="schoolName">
              <el-input v-input-restrict v-model="queryParams.schoolName" placeholder="请输入门店名称" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini"
                @click="handleQuery">搜索</el-button>
              <el-button v-preventReClick icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="postList">
            <el-table-column show-overflow-tooltip :label="`${$courseName ? $courseName : '课程'}`" align="center"
              prop="course_name" />
            <el-table-column show-overflow-tooltip label="岗位" align="center" prop="postNames" />
            <el-table-column show-overflow-tooltip label="学员" align="center" prop="studentNames">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="课程时长（h）" sortable align="center" prop="studyTime">
              <template slot-scope="scope">
                <div>
                  {{
            scope.row.study_time || scope.row.study_time == 0
              ? scope.row.study_time
              : "--"
          }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="门店" align="center" prop="school_name">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.school_name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="完成状况" align="center" prop="avgScore">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.finishStudents }} / {{ scope.row.allStudents }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-tab-pane>
        <!-- 抽查记录 -->
        <el-tab-pane label="抽查记录" name="check" v-if="!$route.query.from">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="抽查名称" prop="title">
              <el-input v-input-restrict v-model="queryParams.title" placeholder="请输入抽查名称" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="queryParams.status" placeholder="状态">
                <el-option label="全部" :value="undefined" />
                <el-option label="未通过" :value="4" />
                <el-option label="未提交" :value="0" />
                <el-option label="已通过" :value="3" />
                <el-option label="未批改" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini"
                @click="handleQuery">搜索</el-button>
              <el-button v-preventReClick icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="postList">
            <el-table-column show-overflow-tooltip label="抽查名称" align="center" prop="title" />
            <el-table-column show-overflow-tooltip label="成绩" align="center" prop="teacherNames">
              <template slot-scope="scope">
                {{
            scope.row.score || scope.row.score == 0
              ? scope.row.score
              : "--"
          }}
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="passing">
              <template slot-scope="scope">
                <span v-if="scope.row.passing === 0 || scope.row.passing === null" class="el-tag el-tag--danger">
                  未提交
                </span>
                <span v-else-if="scope.row.passing === 2" class="el-tag el-tag--warning">
                  未批改
                </span>
                <span v-else class="el-tag el-tag--success"> 已批改 </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button v-if="scope.row.passing === 1 || scope.row.passing === -1" v-preventReClick size="mini"
                  type="text" icon="el-icon-view" @click="toPaper(scope.row)">详情</el-button>
                <el-button v-if="scope.row.passing === 2" v-preventReClick size="mini" type="text" icon="el-icon-edit"
                  @click="handleCorrect(scope.row)">批改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-tab-pane>
      </el-tabs>
      <!-- 成绩详情 -->
      <studentGradeDetail :open.sync="gradeDetail_open" :id="gradeDetail_id"
        :schoolCourseId="gradeDetail_schoolCourseId" :index="gradeDetail_index" :list="postList"></studentGradeDetail>
    </div>
  </div>
</template>

<script>
import studentGradeDetail from "@/components/studentGradeDetail";
import { getPost_student } from "@/api/schoolOrganization/student";
import {
  studentStudyStatisticsData,
  getTeachingRecord,
  getStudyRecord,
  myMedalList,
  getCheckingRecord,
} from "@/api/system/user";
import { getMedalList } from "@/api/medal/medal";
import { examSpotCheckSituationList } from "@/api/checkTest/checkTest";
import { resetKickOut, finishCourse } from "@/api/course/handel";
export default {
  name: "Post",
  components: {
    studentGradeDetail,
  },
  data() {
    return {
      // 成绩详情组件
      gradeDetail_open: false,
      gradeDetail_id: undefined,
      gradeDetail_schoolCourseId: undefined,
      gradeDetail_index: undefined,
      //
      activeName: "study",
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      medals: [],
      // 查询参数
      queryParams: {
        schoolName: undefined,
        studentId: undefined,
        userId: undefined,
        pageNum: 1,
        pageSize: 10,
        courseName: undefined,
        title: undefined,
        status: undefined,
      },
      //   学生信息
      info: {},
      data: {},
    };
  },
  watch: {
    activeName: {
      handler(newVal) {
        this.queryParams = {
          studentId: this.$route.query.studentId,
          userId: this.$route.query.userId,
          pageNum: 1,
          pageSize: 10,
          status: undefined,
          courseName: undefined,
          title: undefined,
        };
        this.getList();
      },
    },
  },
  activated() {
    this.queryParams = {
      studentId: this.$route.query.studentId,
      userId: this.$route.query.userId,
      pageNum: 1,
      pageSize: 10,
      status: undefined,
      courseName: undefined,
      title: undefined,
    };
    this.getList();
    this.getInfo();
  },
  created() {
    this.queryParams = {
      studentId: this.$route.query.studentId,
      userId: this.$route.query.userId,
      pageNum: 1,
      pageSize: 10,
      status: undefined,
      courseName: undefined,
      title: undefined,
    };
    this.getList();
    this.getInfo();
  },
  methods: {
    /* 通过课程 */
    handlePass(row, index) {
      this.$confirm(
        `确定后${this.info.name}的《${row.courseName}》课程状态为已学完，仅在个人中心授课记录中查看，请谨慎操！`,
        "通过课程",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let res = await finishCourse({
            courseStuId: row.courseStuId,
            studentId: this.$route.query.studentId,
            courseId: row.courseId,
            schoolId: row.schoolId,
          });
          this.$message({
            type: "success",
            message: "通过课程成功",
          });
          this.getList();
        })
        .catch(() => { });
    },
    /* 踢出课程 */
    handlekickOut(row) {
      this.$confirm(
        `确定后清除${this.info.name}《${row.courseName}》的学习记录，重新添加学员后可重新学，请谨慎操！`,
        "踢出课程",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let res = await resetKickOut({
            courseStuId: row.courseStuId,
            studentId: this.$route.query.studentId,
            courseId: row.courseId,
            schoolId: row.schoolId,
          });
          this.$message({
            type: "success",
            message: "踢出课程成功",
          });
          this.getList();
        })
        .catch(() => { });
    },
    /** 批改操作 */
    handleCorrect(row) {
      this.$router.push({
        path: "/testCheck/approvalAnswer",
        query: {
          keyId: row.examPaperId,
          userId: row.userId,
        },
      });
    },
    /* 前往页面详情 */
    toPaper(item) {
      this.$router.push({
        path: "/testCheck/examDetail",
        query: {
          id: item.examPaperId,
          userId: item.userId,
        },
      });
    },
    /* 查询成绩详情 */
    handleGradeDetail(row, index) {
      this.gradeDetail_open = true;
      this.gradeDetail_id = this.$route.query.studentId;
      this.gradeDetail_schoolCourseId = row.schoolCourseId;
      this.gradeDetail_index = index;
    },
    /* 查询学生详细信息 */
    async getInfo() {
      let res = await getPost_student(this.$route.query.studentId);
      console.log("info", res.data);
      this.info = res.data;
      let data = await studentStudyStatisticsData(this.$route.query.studentId);
      console.log("data", data.data);
      this.data = data.data;
      let medal = await getMedalList(1, 9999, "", this.$route.query.userId);
      console.log(medal);
      this.medals = medal.rows;
    },
    /** 查询岗位列表 */
    async getList() {
      try {
        this.loading = true;
        let res;
        if (this.activeName == "study") {
          res = await getStudyRecord(this.queryParams);
          this.postList = res.rows || res.data;
          this.total = res.total;
        } else if (this.activeName == "teach") {
          res = await getTeachingRecord(this.queryParams);
          this.postList = res.rows || res.data;
          this.total = res.total;
        } else {
          res = await examSpotCheckSituationList(this.queryParams);
          this.postList = res.rows || res.data;
          this.total = res.total;
        }
      } finally {
        this.loading = false;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        schoolName: undefined,
        studentId: this.$route.query.studentId,
        userId: this.$route.query.userId,
        pageNum: 1,
        pageSize: 10,
        courseName: undefined,
        title: undefined,
        status: undefined,
      }
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped>
.info {
  .info-left {
    max-width: 896px;
    box-sizing: border-box;
    padding: 24px 16px;
    margin-right: 10px;
    flex: 1;
    height: 194px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #f0f0f0;

    .usercard {
      width: 216px;
      height: 146px;
      background: url("../../../assets/images/userDetail/bg.png");
      box-sizing: border-box;

      .info_avatar {
        display: block;
        margin: 16px auto 0 auto;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #00deff;
      }

      .name {
        text-align: center;
        margin-top: 8px;
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 22px;
        text-shadow: 0px 1px 1px rgba(0, 25, 98, 0.62);
      }

      .phone {
        margin-top: 10px;

        img {
          margin-right: 10px;
          margin-left: 46px;
          width: 24px;
          height: 25px;
        }

        font-size: 14px;
        font-family: PingFangSC,
        PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 25px;
        text-shadow: 0px 1px 1px rgba(0, 25, 98, 0.62);
      }
    }

    .medal-data {
      margin-left: 16px;
      flex: 1;

      .medal {
        height: 72px;
        border-bottom: 1px solid #dddee2;

        .medal-icon {
          width: 48px;
          height: 48px;
          margin-right: 16px;
        }

        .medal-right {
          flex: 1;

          .medal-label {
            font-size: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #bfcbd9;
            line-height: 22px;
          }

          .medal-list {
            white-space: nowrap;
            margin-top: 8px;
            width: 300px;
            overflow-x: scroll;
            overflow-y: hidden;

            .medal-item {
              border-radius: 50%;
              display: line-block;
              margin-right: 10px;
              width: 24px;
              height: 24px;
            }
          }

          .medal-list:hover::-webkit-scrollbar {
            width: 4px;
          }

          // 滚动条的宽度
          .medal-list:hover::-webkit-scrollbar {
            width: 4px; // 横向滚动条
            height: 4px; // 纵向滚动条 必写
          }

          // 滚动条的滑块
          .medal-list:hover::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
          }
        }
      }

      .data {
        width: 100%;
        padding-top: 24px;

        .data-item {
          .data-icon {
            width: 48px;
            height: 48px;
            margin-right: 16px;
          }

          .data-form {
            .data-label {
              text-align: left;
              font-size: 16px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #bfcbd9;
              line-height: 22px;
            }

            .data-value {
              text-align: center;
              font-size: 18px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #333333;
              line-height: 25px;
            }
          }
        }
      }
    }
  }

  .info-right:hover::-webkit-scrollbar {
    width: 4px;
  }

  // 滚动条的宽度
  .info-right:hover::-webkit-scrollbar {
    width: 4px; // 横向滚动条
    height: 4px; // 纵向滚动条 必写
  }

  // 滚动条的滑块
  .info-right:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  .info-right {
    overflow-y: scroll;
    height: 194px;
    width: 20vw;
    box-sizing: border-box;
    padding: 0 10px 0 16px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #f0f0f0;

    .post {
      margin: 32px 0 0 0;

      .post-label {
        .point {
          margin: 8px 8px 0 0;
          border-radius: 4px;
          width: 8px;
          height: 8px;
          background: #28b28b;
        }

        .label {
          font-size: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #bfcbd9;
          line-height: 22px;
        }
      }

      .post-value {
        margin: 2px 0 0 14px;
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
      }
    }
  }
}
</style>